<template>
  <div class="con" style="width: 99%">
    <div style="height: 60px"></div>
    <!-- 第一行三个card -->
    <el-row :gutter="4">
      <el-col :span="6">
        <el-card style="height: 100%">
          <span style="color: #4d62a5; font-size: 20px; font-weight: 900"
            >项目信息</span
          >
          <el-divider style="margin-top: 5px" />
          <el-row :gutter="20">
            <el-col :span="14">
              <div style="font-size: 5px">
                <p>项目地址：{{ state.datalist.address }}</p>
                <p>建筑面积：{{ state.datalist.area }}㎡</p>
                <p>地上：{{ state.datalist.up }}㎡+楼控系统</p>
                <p>地下：{{ state.datalist.down }}㎡</p>
                <p>办公：{{ state.datalist.office }}㎡</p>
                <p>商城：{{ state.datalist.shop }}㎡</p>
                <p>公寓：{{ state.datalist.home }}㎡</p>
                <p>车库：{{ state.datalist.garage }}㎡</p>
                <p>酒店：{{ state.datalist.hotel }}㎡</p>
                <p>星级：{{ state.datalist.level }}</p>
                <p>竣工日期：{{ state.datalist.time }}</p>
                <p>投入成本：{{ state.admin.cost }}</p>
                <p>OAO系统开始运作日期：{{ state.admin.start }}</p>
              </div>
              <!-- <div style="margin-top: 10px">
                <p>{{ state.datalist.point }}</p>
                <p>{{ state.datalist.owner }}</p>
                <p>{{ state.datalist.create_time }}</p>
                <p>{{ state.datalist.img }}</p>
                <p>{{ state.datalist.project_name }}</p>
              </div> -->
            </el-col>
            <el-col :span="10">
              <img
                style="border-radius: 5px"
                :src="`${state.datalist.img}`"
                height="100"
                width="150"
                alt=""
              />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 100%">
          <el-row :gutter="5">
            <el-col :span="6"
              ><span style="color: #4d62a5; font-size: 20px; font-weight: 900"
                >舒适</span
              >
            </el-col>
            <el-col :span="9"></el-col>
            <el-col :span="4">
              <el-select
                v-model="value"
                @change="handleTypes"
                placeholder="温度"
                size="small"
              >
                <el-option label="温度" value="温度" />
                <el-option label="湿度" value="湿度" />
                <el-option label="CO2" value="CO2" />
                <el-option label="PM2.5" value="PM2.5" />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-date-picker
                style="width: 150px"
                v-model="value1"
                type="date"
                :disabled-date="disabledDate"
                placeholder="请选择日期"
                size="small"
                @change="handleDate"
              />
            </el-col>
          </el-row>
          <el-divider style="margin-top: 5px" />
          <el-row :gutter="5">
            <el-col :span="4">
              <el-button
                style="color: orange"
                class="el-button-wether"
                auto-insert-space
              >
                {{ wether }}</el-button
              >
            </el-col>
            <el-col :span="5">
              <el-row :gutter="10">
                <el-col :span="12">
                  <p>温度</p>
                  <p>
                    <span style="color: rgb(29, 123, 203); font-size: 20px">
                      {{ shu.wen }} </span
                    >℃
                  </p>
                  <p>
                    (
                    <!-- 18-20 -->
                    )
                  </p>
                </el-col>
                <el-col :span="12">
                  <p>湿度</p>
                  <p>
                    <span style="color: rgb(29, 123, 203); font-size: 20px">
                      {{ shu.shi }} </span
                    >%
                  </p>
                  <p>
                    (
                    <!-- 30-60 -->
                    )
                  </p>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 20px">
                <el-col :span="12">
                  <p>二氧化碳</p>
                  <p>
                    <span style="color: rgb(29, 123, 203); font-size: 20px">
                      <!-- 560.3 --> </span
                    >ppm
                  </p>
                  <p>
                    (
                    <!-- ≤1,000 -->
                    )
                  </p>
                </el-col>
                <el-col :span="12">
                  <p>PM2.5</p>
                  <p>
                    <span style="color: rgb(29, 123, 203); font-size: 20px">
                      <!-- 32.1 --> </span
                    >μg/m³
                  </p>
                  <p>
                    (
                    <!-- ≤15 -->
                    )
                  </p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="14">
              <div style="width: 100%; height: 160px" id="main"></div>
              <!-- <scEcharts
                width="100%"
                height="160px"
                :option="option"
              ></scEcharts> -->
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 100%">
          <el-row :gutter="20">
            <el-col :span="6">
              <span style="color: #4d62a5; font-size: 20px; font-weight: 900"
                >资产价值</span
              >
            </el-col>
            <el-col :span="8"></el-col>
            <el-col :span="10">
              <!-- <span style="color: #4d62a5; font-size: 15px; font-weight: 900"
                >OAO陪伴
                <el-button
                  @click="returnforword"
                  style="margin-left: 10px; background-color: rgb(77, 98, 165)"
                  round
                  size="small"
                >
                  <sc-icon>
                    <sc-icon-return style="width: 20px; height: 20px"></sc-icon-return>
                  </sc-icon>
                </el-button>
              </span> -->
            </el-col>
          </el-row>
          <el-divider style="margin-top: 5px" />
          <el-row>
            <el-col :span="8">
              <div style="margin-top: 45px">
                <p>
                  预期ROI<span
                    style="
                      color: rgb(29, 123, 203);
                      font-size: 20px;
                      margin-left: 20px;
                    "
                  >
                    <!-- 23.1 --> </span
                  >%
                </p>
                <p style="margin-top: 20px">
                  预期IRR<span
                    style="
                      color: rgb(29, 123, 203);
                      font-size: 20px;
                      margin-left: 20px;
                    "
                  >
                    <!-- 23.1 -->
                  </span>
                </p>
              </div>
            </el-col>
            <el-col :span="16">
              <scEcharts
                style="margin-top: -20px"
                width="100%"
                height="170px"
                :option="option1"
              >
              </scEcharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 5px"></div>
    <el-row :gutter="4">
      <el-col :span="6">
        <el-card style="height: 110%">
          <span style="color: #4d62a5; font-size: 20px; font-weight: 900"
            >特色展示</span
          >
          <el-divider style="margin-top: 5px" />
          <el-row>
            <el-col :span="5"> 碳中和成本 </el-col>
            <el-col :span="10"></el-col>
            <el-col :span="9">
              <span style="color: rgb(29, 123, 203); font-size: 20px">
                <!-- 30,000 --> </span
              >RMB/年
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="19"></el-col>
            <el-col :span="5">
              <span style="font-size: 15px">碳排放</span>
            </el-col>
          </el-row>
          <!-- <scEcharts width="100%" height="300px" :option="option2"></scEcharts> -->
          <div id="four" style="height: 300px"></div>
          <el-row style="margin-top: 10px">
            <el-col :span="8">
              助力
              <el-select
                style="width: 100px"
                v-model="value2"
                placeholder="LEED"
                size="small"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="13"></el-col>
            <el-col :span="3">
              <span style="color: rgb(29, 123, 203); font-size: 20px">
                <!-- 5 --> </span
              >分
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-row :gutter="4">
          <el-col :span="16">
            <el-card style="height: 98.5%">
              <span style="color: #4d62a5; font-size: 20px; font-weight: 900"
                >能耗</span
              >
              <el-divider style="margin-top: 5px" />
              <div style="height: 130px; margin-top: -20px">
                <el-row>
                  <el-col :span="10">
                    <div style="margin-left: 20px">
                      <p>OAO</p>
                      <p>
                        累计收益：<el-select
                          style="width: 100px"
                          v-model="value4"
                          placeholder="节费"
                          size="small"
                        >
                          <el-option label="节电" value="节电"></el-option>
                          <el-option label="节费" value="节费"></el-option>
                          <el-option label="减碳" value="减碳"></el-option>
                        </el-select>
                        <span
                          style="
                            color: rgb(29, 123, 203);
                            font-size: 20px;
                            margin: 0 5px 0 20px;
                          "
                        >
                          <!-- 26,000 --> </span
                        >RMB
                      </p>
                      <p style="margin: 20px 0 0 180px">超过/不足</p>
                      <p>
                        相比目标：
                        <el-select
                          style="width: 100px"
                          v-model="value5"
                          placeholder="节费"
                          size="small"
                        >
                          <el-option label="节电" value="节电"></el-option>
                          <el-option label="节费" value="节费"></el-option>
                          <el-option label="减碳" value="减碳"></el-option>
                        </el-select>
                        <span
                          style="
                            color: rgb(29, 123, 203);
                            font-size: 20px;
                            margin: 0 5px 0 20px;
                          "
                        >
                          <!-- 30,000 --> </span
                        >kwh
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <!-- <scEcharts style="margin-top: -30px" height="180px" :option="option5">
                    </scEcharts> -->
                    <div style="height: 180px">
                      <div
                        class="echOne"
                        style="
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          position: absolute;
                          top: 0;
                          right: 0;
                          z-index: 2;
                        "
                      >
                        <el-select
                          v-model="select1"
                          style="width: 115px"
                          @change="getQiangDu(select1)"
                        >
                          <el-option label="kWh/m²" value="kWh/m²" />
                          <el-option label="RMB/m²" value="RMB/m²" />
                          <el-option label="kgce/m²" value="kgce/m²" />
                        </el-select>
                      </div>
                      <div>
                        <div id="five" style="height: 180px"></div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div style="height: 130px; margin-top: 0">
                <div id="three" style="height: 160px"></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="height: 98.5%">
              <span style="color: #4d62a5; font-size: 20px; font-weight: 900"
                >风险</span
              >
              <el-divider style="margin-top: 5px" />
              <div style="height: 130px; margin-top: -20px">
                <scEcharts :option="option3"></scEcharts>
              </div>
              <div style="height: 130px; margin-top: 0">
                <scEcharts :option="option4"></scEcharts>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card style="height: 125%">
              <el-row :gutter="4">
                <el-col :span="2"
                  ><span
                    style="color: #4d62a5; font-size: 20px; font-weight: 900"
                    >设备管理</span
                  >
                </el-col>
                <el-col :span="16"></el-col>
                <el-col :span="6" style="text-align: right">
                  <el-date-picker
                    size="small"
                    style="width: 200px"
                    v-model="value3"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-col>
              </el-row>
              <el-divider style="margin-top: 5px" />
              <el-row>
                <el-col :span="19">
                  <scEcharts
                    style="margin-top: -20px; float: right"
                    height="150px"
                    :option="option7"
                  >
                  </scEcharts>
                </el-col>
                <el-col :span="5">
                  <p>运维工单</p>
                  <ul>
                    <li
                      style="margin-top: 10px"
                      v-for="(item, index) of list"
                      :key="index"
                    >
                      {{ item }}
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { inuserput } from "@/api/model/login";
import {
  Analysis,
  getdwMsg,
  ProjectGroupone,
  dataMonth,
} from "@/api/model/echarts";
import { AdminInputs } from "@/api/model/admins";
import * as echarts from "echarts";
import scEcharts from "@/components/scEcharts";
import dayjs from "dayjs";

var value = ref("温度");
var value1 = ref("");
var value2 = ref("LEED");
var value3 = ref("");
var value4 = ref("");
var value5 = ref("");
var wether = ref("良好");
var select1 = ref("kWh/m²");
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const handleDate = () => {
  getZongHe(value.value, value1.value);
};
const handleTypes = () => {
  getZongHe(value.value, value1.value);
};
var list = reactive([
  // "22-04-23 09:30 冷冻水出水温度调整为9度",
  // "22-04-23 09:30 冷冻水出水温度调整为9度",
  // "22-04-23 09:30 冷冻水出水温度调整为9度",
]);
let shu = reactive({
  wen: 0,
  shi: 0,
});
const getMsgs = async () => {
  const { data } = await getdwMsg();
  wether.value = data["syn-eva"];
  shu.wen = data["syn-t"];
  shu.shi = data["syn-h"];
};
// 获取综合评价曲线
const getZongHe = async (type, date = dayjs().format("YYYY-MM-DD")) => {
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室外",
    thirdType: type,
    projectId: 1,
  };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  let { data: res } = await Analysis(obj);
  console.log("Analysisres", res);
  if (res.data) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let obj2 = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室内",
    thirdType: type,
    projectId: 1,
  };
  let data01 = ["0"]; // 时间
  let data12 = ["0"]; // type1数据
  let data22 = ["0"]; // type2数据
  let data32 = ["0"]; // type3数据
  let { data: res2 } = await Analysis(obj2);
  if (res2.data) {
    res2.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data12.push(item.number1);
      } else if (item.type == "type2") {
        data22.push(item.number1);
      } else if (item.type == "type3") {
        data32.push(item.number1);
      }
      data01.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let datagb;

  if (type == "CO2") {
    datagb = [
      {
        yAxis: 1000,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 800,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "美标",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 600,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "WHO",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
    ];
  } else if (type == "PM2.5") {
    datagb = [
      {
        yAxis: 75,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标二级",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 35,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标一级",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 15,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "WHO",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
    ];
  } else {
    datagb = [];
  }
  let myChart2 = echarts.init(document.getElementById("main"));
  myChart2.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室内", "室外"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data,
      min: 1,
    },
    yAxis: { type: "value" },
    series: [
      {
        name: "室外",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: datagb,
          label: {
            show: true,
          },
        },
      },
      {
        name: "室内",
        type: "line",
        stack: "Total",
        data: data12,
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: datagb,
          label: {
            show: true,
          },
        },
      },
    ],
  });
};

// 获取能耗曲线
async function getNengHao(type = "kwh") {
  const three = {
    indicatorName: "过去十二个月能耗",
    firstType: "节电分析",
    secondType: "",
    // type: "year",
    thirdType: type,
    projectId: 1,
    dataType: "month",
    dayFrom: dayjs().subtract(12, "M").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
    // projectId: "1",
  };
  // 暂时由前端本地存储获取
  let res = await dataMonth(three);
  var byear = [];
  var num = [];
  var num2 = [];
  var num3 = [];
  res.data.data.commonMonthlyDataList.forEach((item) => {
    byear.push(`${item.day.substring(0, 7)}`);
    if (item.type == "type1") {
      num.push(item.number1);
    }
    if (item.type == "type2") {
      num2.push(item.number1);
    }
    if (item.type == "type3") {
      num3.push(item.number1);
    }
  });

  let list = [...new Set(byear)];
  console.log(list, "shijian");

  let myChart3 = echarts.init(document.getElementById("three"));
  myChart3.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      top: 10,
      right: 30,
      itemWidth: 20,
      itemHeight: 1,
    },
    grid: {
      left: "3%",
      right: "5%",
      bottom: "5%",
      top: "25%",
      containLabel: true,
    },
    xAxis: {
      data: list,
      name: "月",
    },
    yAxis: {
      type: "value",
      name: type + "/m²",
    },
    series: [
      {
        name: "实际能耗",
        type: "line",
        stack: "Total",
        data: num3,
        color: "#ffc40f",
      },
      {
        name: "能耗预算",
        type: "line",
        stack: "Total",
        data: num,
        color: "#dddddd",
      },
    ],
  });
}
var options = reactive([
  {
    value: "LEED",
    label: "LEED",
  },
  {
    value: "MSCI",
    label: "MSCI",
  },
  {
    value: "BRE",
    label: "BRE",
  },
]);

var option1 = reactive({
  title: {
    subtext: "资产增值",
    right: "10%",
  },
  xAxis: {
    type: "category",
    data: ["2019", "2020", "2021"],
  },
  yAxis: {
    axisLine: {
      show: true,
    },
    name: "K RMB",
    type: "value",
  },
  grid: {
    left: "5%",
    right: "10%",
    bottom: "10%",
    containLabel: true,
  },
  series: [
    {
      // data: [
      //   {
      //     value: 200,
      //     itemStyle: {
      //       color: " #D6EBFA",
      //     },
      //   },
      //   {
      //     value: 140,
      //     itemStyle: {
      //       color: "#D6EBFA",
      //     },
      //   },
      //   {
      //     value: 230,
      //     itemStyle: {
      //       color: "#D6EBFA",
      //     },
      //   },
      // ],
      type: "bar",
    },
  ],
});
// var option2 = reactive({
//   legend: {
//     orient: "horizontal",
//     bottom: 20,
//     right: 60,
//     itemHeight: 1,
//   },
//   tooltip: {
//     trigger: "axis",
//   },
//   grid: {
//     left: "3%",
//     right: "20%",
//     bottom: "15%",
//     containLabel: true,
//   },
//   // dataset: {
//   //   source: [
//   //     ["product", "", "可比建筑", "本地建筑"],
//   //     ["2019", 195, 200, 225],
//   //     ["2020", 140, 160, 180],
//   //     ["2021", 230, 200, 225],
//   //   ],
//   // },
//   xAxis: { type: "category", name: "年" },
//   yAxis: {
//     name: "k RMB",
//     axisLine: {
//       // x轴线隐藏，但不隐藏背景线
//       show: true,
//     },
//   },
//   series: [
//     {
//       type: "bar",
//       itemStyle: {
//         color: "#D6EBFA",
//       },
//     },
//     {
//       type: "line",
//       symbol: "none",
//       lineStyle: {
//         width: 3,
//         color: "#fed864",
//       },
//     },
//     {
//       type: "line",
//       symbol: "none",
//       lineStyle: {
//         width: 3,
//         color: "red",
//       },
//     },
//   ],
// });
var option3 = reactive({
  title: {
    subtext: "设备健康度",
    right: "right",
  },
  xAxis: {
    name: "日",
    type: "category",
    data: [
      "4/20",
      "4/21",
      "4/22",
      "4/23",
      "4/24",
      "4/25",
      "4/26",
      "4/27",
      "昨日",
      "今日",
    ],
  },
  yAxis: {
    name: "%",
    axisLine: {
      show: true,
    },
    type: "value",
  },
  grid: {
    left: "5%",
    right: "10%",
    bottom: "10%",
    containLabel: true,
  },
  series: [
    {
      // data: [10, 15, 25, 10, 15, 20, 30, 10, 18, 15],
      type: "line",
      lineStyle: {
        color: "rgb(255,196,15)",
      },
      itemStyle: {
        color: "rgb(255,196,15)",
      },
    },
  ],
});
var option4 = reactive({
  title: {
    subtext: "故障修复时间(平均)",
    right: "right",
  },
  xAxis: {
    name: "日",
    type: "category",
    data: [
      "4/20",
      "4/21",
      "4/22",
      "4/23",
      "4/24",
      "4/25",
      "4/26",
      "4/27",
      "昨日",
      "今日",
    ],
  },
  yAxis: {
    name: "小时",
    axisLine: {
      show: true,
    },
    type: "value",
  },
  grid: {
    left: "5%",
    right: "10%",
    bottom: "10%",
    containLabel: true,
  },
  series: [
    {
      // data: [10, 15, 25, 10, 15, 20, 30, 10, 18, 15],
      type: "line",
      lineStyle: {
        color: "rgb(255,196,15)",
      },
      itemStyle: {
        color: "rgb(255,196,15)",
      },
    },
  ],
});
// var option5 = reactive({
//   legend: {
//     orient: "vertical",
//     right: 20,
//     top: "center",
//   },
//   tooltip: {
//     trigger: "axis",
//   },
//   grid: {
//     left: "3%",
//     right: "20%",
//     bottom: "3%",
//     containLabel: true,
//   },
//   // dataset: {
//   //   source: [
//   //     ["product", "实际消耗", "能耗预算", "类似建筑", "本地强制", "本地先进"],
//   //     ["2019", 200, 150, 30, 200, 150],
//   //     ["2020", 100, 150, 55.1, 200, 150],
//   //     ["2021", 220, 210, 82.5, 200, 150],
//   //   ],
//   // },
//   xAxis: { type: "category", name: "年" },
//   yAxis: {
//     name: "RMB/m²",
//     axisLine: {
//       // x轴线隐藏，但不隐藏背景线
//       show: true,
//     },
//   },
//   series: [
//     {
//       type: "bar",
//       itemStyle: {
//         color: "#D6EBFA",
//       },
//     },
//     {
//       type: "bar",
//       itemStyle: {
//         color: "#0070C0",
//       },
//     },
//     {
//       type: "bar",
//       itemStyle: {
//         color: "#FFA34E",
//       },
//     },
//     {
//       type: "line",
//       symbol: "none",
//       // lineStyle: {
//       //     width: 3,
//       //     color: '#fed864'
//       // },
//     },
//     {
//       type: "line",
//       symbol: "none",
//       lineStyle: {
//         width: 3,
//         color: "green",
//       },
//     },
//   ],
// });

var option7 = reactive({
  legend: {
    width: "auto",
    left: "left",
    bottom: "10%",
    orient: "vertical",
    itemHeight: 1,
  },
  xAxis: {
    name: "月",
    data: [
      "2021.1",
      "2021.2",
      "2021.3",
      "2021.4",
      "2021.5",
      "2021.6",
      "2021.7",
      "2021.8",
      "2021.9",
      "2021.10",
      "2021.11",
      "2021.12",
    ],
  },
  yAxis: [
    {
      type: "value",
      alignTicks: true,
      name: "%",
      position: "left",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ADAEB4",
        },
      },
    },
    {
      type: "value",
      alignTicks: true,
      name: "小时",
      position: "right",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ADAEB4",
        },
      },
    },
  ],
  grid: {
    left: "15%",
    right: "5%",
    bottom: "10%",
    containLabel: true,
  },
  series: [
    {
      name: "工单执行率",
      // data: [10, 14, 8, 9, 6, 12, 6, 8, 2, 14, 5, 10],
      type: "line",
      lineStyle: {
        color: "#EEEEEE",
      },
      itemStyle: {
        color: "#EEEEEE",
      },
    },
    {
      name: "工单成功执行率",
      // data: [9, 5, 10, 5, 13, 8, 4, 7, 9, 15, 10, 5],
      type: "line",
      lineStyle: {
        color: "#FFC40F",
      },
      itemStyle: {
        color: "#FFC40F",
      },
    },
    {
      name: "平均工单响应时间",
      // data: [8, 9, 12, 6, 7, 10, 8, 15, 11, 8, 3, 14],
      type: "line",
      lineStyle: {
        color: "#0070C0",
      },
      itemStyle: {
        color: "#0070C0",
      },
    },
  ],
});
//跳转回首页功能
// function returnforword() {
//   // console.log(history)
//   history.back();
// }
let state = reactive({
  datalist: [],
  admin: { start: "", cost: "", info: "" },
  a: {
    project_id: sessionStorage.getItem("proid") || "1",
  },
});
onMounted(() => {
  getNengHao();

  getdata();

  getTanPai(); //碳排放

  getQiangDu(); // 用能强度

  getZongHe(value.value);
  getMsgs();
});

const getdata = async () => {
  let { data: res } = await inuserput();
  let { data: res1 } = await AdminInputs();

  let dt = JSON.parse(res1.data.list[0].info);
  state.admin.start = dt.StartTime;
  state.admin.cost = dt.cost;
  state.admin.info = dt.Describe;

  state.datalist = JSON.parse(res.data.list[0].info);
  console.log("state.datalist", state.datalist);
  console.log("dt", dt);
};

// 单位转换
const dwzh = reactive({
  // kgce
  kgce: 0,
  // RMB
  rmb: 0.79,
  // kgco2
  kgco: 0,
});

// 碳排放碳中和成喷和购买绿成本
const tanData = reactive({
  zhcb: 0,
  ldcb: 0,
});

// 碳排放
const getTanPai = async () => {
  let obj = {
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
    firstType: "关键指标",
    indicatorName: "碳排放",
    thirdType: "",
    projectId: 1,
  };

  let data = []; //日期
  let { data: res } = await ProjectGroupone(obj);
  console.log("ProjectGrouponeres", res);
  let { data: jzdata } = await inuserput();
  let jz = jzdata.data.list[0];
  console.log("jz", jz);
  let { data: userInputdata } = await AdminInputs();
  let userInput = userInputdata.data.list[0];
  console.log("userInput", userInput);
  // kgce单位交互输入
  dwzh.kgce = JSON.parse(userInput.unit).electric_tce;
  // kgco单位交互输入
  dwzh.kgco = JSON.parse(userInput.unit).electric_kgco;

  // 柱状图数据
  let barAjaxData = JSON.parse(userInput.energy);
  // 碳转换基数
  let kgcozh = JSON.parse(userInput.unit).electric_kgco;
  // 单价
  let ccer = JSON.parse(userInput.related).ccer;
  // 类似建筑
  let ls = JSON.parse(userInput.related).build;
  // 本地强制
  let bdqz = JSON.parse(userInput.related).rational;
  // 建筑面积
  let jzmj = JSON.parse(jz.info).area.split(",").join("");
  jzmj = parseInt(jzmj);
  // console.log( typeof jzmj,'建筑面积--------');
  // 绿电价格
  let ldjg = JSON.parse(userInput.related).electricity;

  // 碳中和成本
  // tanData.zhcb = ldjg * barAjaxData.LastssYear.electric;
  tanData.zhcb = (
    (barAjaxData.LastssYear.electric * kgcozh * ccer) /
    1000
  ).toFixed(2);
  tanData.ldcb = ldjg * barAjaxData.LastssYear.electric;

  // 能耗柱状图数据
  let bardata = [
    ((barAjaxData.LastYear.electric * kgcozh * ccer) / 1000).toFixed(2),
    ((barAjaxData.LastsYear.electric * kgcozh * ccer) / 1000).toFixed(2),
    ((barAjaxData.LastssYear.electric * kgcozh * ccer) / 1000).toFixed(2),
  ];
  let electrox1 = [
    // 第一条线
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((ls * jzmj * kgcozh * ccer) / 1000).toFixed(2),
  ];
  let electrox2 = [
    // 第二条线
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
    ((bdqz * jzmj * kgcozh * ccer) / 1000).toFixed(2),
  ];
  // console.log(ls, jzmj, kgcozh, ccer,'------------------------------------------------------------------------');
  if (res.code == 200) {
    res.data.commonDailyDataList.forEach((item) => {
      // console.log(`${item.day.substring(0, 4)}`)
      data.push(`${item.day.substring(0, 4)}`);
    });
    let data1 = [...new Set(data)];
    let chartDom4 = echarts.init(document.getElementById("four"));
    chartDom4.setOption({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "7%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        top: 20,
        right: 40,
        itemHeight: 1,
        itemWidth: 15,
      },
      xAxis: [
        {
          type: "category",
          name: "年",
          data: data1,
        },
      ],
      yAxis:
        // [
        {
          name: "K RMB",
          type: "value",
          axisLine: {
            // x轴线隐藏，但不隐藏背景线
            show: true,
          },
        },

      series: [
        {
          type: "bar",
          name: "能耗",
          barGap: 0,
          axisLine: { onZero: true },
          data: bardata,
          color: "#d6ebfa",
        },
        {
          type: "line",
          name: "可比建筑",
          // yAxisIndex:1,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#D90909",
          },
          data: electrox1,
        },
        {
          type: "line",
          name: "本地标准",
          // yAxisIndex:1,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "#FFC40F",
          },
          data: electrox2,
        },
      ],
    });
  }
};

// 用能强度
const getQiangDu = async (key = "kWh/m²") => {
  // 建筑面积
  let { data: userputdata } = await inuserput();
  let userput = userputdata.data;
  console.log("userput", userput);
  // let area = JSON.parse(userput.data.info).area;
  let area = JSON.parse(userput.list[0].info).area.split(",").join("");
  // let area = JSON.parse(userput.data.info).area.split(',').join('');
  area = parseInt(area);
  console.log(area, "jzmj");
  // 实际能耗
  let { data: nhdata } = await AdminInputs();
  let nh = nhdata.data.list[0];
  console.log("nh", nh);
  console.log("groupss", JSON.parse(nh.groupss));
  console.log("info", JSON.parse(nh.info));
  console.log("energy", JSON.parse(nh.energy));
  console.log("report", JSON.parse(nh.report));
  console.log("unit", JSON.parse(nh.unit));
  console.log("cosy", JSON.parse(nh.cosy));
  console.log("economy", JSON.parse(nh.economy));
  console.log("esg", JSON.parse(nh.esg));
  console.log("facility", JSON.parse(nh.facility));

  // tce
  let tceD = JSON.parse(nh.unit).electric_tce;

  let dian = JSON.parse(nh.energy);
  console.log("dian", dian);
  let barlist1 = [
    (dian.LastYear.electric / area).toFixed(1),
    (dian.LastsYear.electric / area).toFixed(1),
    (dian.LastssYear.electric / area).toFixed(1),
  ];

  // 类似建筑
  let lsList = JSON.parse(nh.related);
  console.log(lsList, "能耗预算");
  let barlist3 = [lsList.build, lsList.build, lsList.build];

  // 本地强制
  let line4 = [lsList.rational, lsList.rational, lsList.rational];

  // 本地先进
  let line5 = [lsList.advanced, lsList.advanced, lsList.advanced];

  let chartDom5 = echarts.init(document.getElementById("five"));
  chartDom5.setOption({
    grid: {
      show: false,
      top: "17%",
      left: "7%",
      right: "25%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      // data: ["实际能耗", "能耗预算", "类似建筑", "本地强制", "本地先进"],
      data: ["实际能耗", "类似建筑", "本地强制", "本地先进"],
      width: 20,
      right: 10,
      top: "20%",
    },
    xAxis: { type: "category", name: "年", data: [2019, 2020, 2021] },
    yAxis: {
      type: "value",
      name: key,
      // min: 0,
      // max: 1,
      axisLine: {
        show: true,
      },
    },

    series: [
      {
        name: "实际能耗",
        // yAxisIndex:0,
        type: "bar",
        data:
          key === "RMB/m²"
            ? barlist1.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? barlist1.map((item) => (item * tceD).toFixed(1))
            : barlist1,
        barWidth: 30,
        color: "#F79646",
      },
      {
        name: "类似建筑",
        type: "bar",
        // yAxisIndex:1,
        data:
          key === "RMB/m²"
            ? barlist3.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? barlist3.map((item) => (item * tceD).toFixed(1))
            : barlist3,
        color: "#0070C0",
        barWidth: 30,
      },
      {
        name: "本地强制",
        // yAxisIndex:1,
        type: "line",
        data:
          key === "RMB/m²"
            ? line4.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? line4.map((item) => (item * tceD).toFixed(1))
            : line4,
        lineStyle: {
          color: "#FFC40F",
          width: 2,
        },
      },
      {
        name: "本地先进",
        // yAxisIndex:1,
        type: "line",
        data:
          key === "RMB/m²"
            ? line5.map((item) => (item * 0.78).toFixed(1))
            : key === "kgce/m²"
            ? line5.map((item) => (item * tceD).toFixed(1))
            : line5,
        lineStyle: {
          color: "#64CC93",
          width: 2,
        },
      },
    ],
  });
};
</script>

<style>
.con {
  width: 100%;
  padding: 0 0.225rem;
}

.el-button-wether {
  width: 80px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  font-size: 22px;
  border-color: rgb(165, 165, 166);
  border-radius: 5px;
}

.legend {
  list-style: none;
  float: right;
}

.legend li {
  display: inline-block;
  margin-left: 5px;
}

/* .el-row {
  margin-bottom: 0px;
  display: flex;
  flex-wrap: nowrap;
} */
</style>
